<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        Dete:2022-02-09
        writer:chenjiong
        
        1.text-transform:css属性能够使英文字母全部变成大写的或者全部小写又或者首字母大写 
        2.letter-spacing:css属性使文本之间的横向字间距调整。
        3.pointer-events:none css属性能够使元素的鼠标事件失效。
     -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            flex-direction: column;
            background: #040d15;
        }

        a {
            color: #fff;
            position: relative;
            display: inline-block;
            padding: 12px 36px;
            margin: 10px 0;
            text-decoration: none;
            /* text-transform: uppercase; */
            /* text-transform: lowercase; */
            text-transform: capitalize;
            font-size: 18px;
            letter-spacing: 2px;
            border-radius: 40px;
            overflow: hidden;
            background: linear-gradient(45deg, #0162c8, #55e7fc);
        }

        a:nth-child(2) {
            background: linear-gradient(90deg, #755bea, #ff72c0);
        }

        span {
            position: absolute;
            background: #ccc;
            transform: translate(-50%, -50%);
            pointer-events: none;
            border-radius: 50%;
            animation: animate 0.5s linear infinite;
        }

        @keyframes animate {
            0% {
                width: 0px;
                height: 0px;
                opacity: 0.4;
            }

            100% {
                width: 500px;
                height: 500px;
                opacity: 0;
            }
        }
    </style>
</head>

<body>
    <a href="#">buttn</a>
    <a href="#">buttn</a>
</body>
<script type="text/javascript">
    const buttons = document.querySelectorAll('a');
    buttons.forEach((btn) => {
        btn.addEventListener('click', function (e) {
            let x = e.clientX - e.target.offsetLeft;
            let y = e.clientY - e.target.offsetTop;
            let ripples = document.createElement('span')
            ripples.style.left = x + 'px';
            ripples.style.top = y + 'px';
            this.appendChild(ripples)
            setTimeout(() => {
                ripples.remove()
            }, 500)
        })
    })
</script>

</html>